<template>
  <li>
      <div>
          <input type="checkbox" v-model="todo.isDone">
          <span :class="[todo.isDone ? 'del-line' : '']">{{ todo.name }}</span>
      </div>
      <div title="删除" @click="delTodo(todo.id)" class="iconfont icon-a-11-Xhao01"></div>
  </li>
</template>

<script setup>
const props = defineProps(['todo'])
const emit = defineEmits(['delTodo'])

const delTodo = (id) => {
  // 子通信父
  emit('delTodo', id)
}

</script>

<style lang="scss" scoped>
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  .del-line {
    color: #666;
    text-decoration: line-through;
  }
  .iconfont {
    font-size: 25px;
    color: red;
  }
}
</style>